<template>
    <div class="isue-details">
        <div class="title">{{ details?.title }}</div>
        <div class="content" v-html="details?.content"></div>
    </div>
</template>

<script setup lang="ts">
import { issueDetails } from "./issueDetails.service";
import { ref, watch} from "vue";
import { useRoute, useRouter } from "vue-router";
const route = useRoute()
const details = ref()

watch(()=>route.query.id, (newValue, oldValue) => {
  getIssueDetails()
});


const getIssueDetails = () => {
    issueDetails({id:route.query.id}).then((res) => {
        if(res.status === 0){
            details.value = res.data
        }
    console.log(res, "issueDetails");
  });
};

getIssueDetails()
</script>

<style lang="scss" scoped>
.isue-details{
    margin: 0 auto;
    max-width: 1440px;
    padding: 20px 35px;
    box-sizing: border-box;
    .title{
        margin-bottom:20px;
        font-size: 16pt;
        text-align: center;
        font-weight: 600;
    }
}
</style>